import { defineComponent, ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {
  InnoStrategyAPI,
  WordCloudAPI,
  CompInfoAPI,
  TechLayoutAPI,
  TechAnalysisAPI,
} from '@/service/api/CompanyDetailAPI';
import { BusinessInfoMAP } from '@config/map/index';
import InnoStrategy from './InnoStrategy';
import InnoWordCloud from './InnoWordCloud';
import TechAnalysis from './TechAnalysis';
import TechLayout from './TechLayout';
import CompInfo from './CompInfo';
import BusinessInfo from './BusinessInfo';
import './style.scss';

export default defineComponent({
  name: 'CompanyDetail',
  setup() {
    const InnoStrategyData: any = ref({}); // 创新战略
    const WordCloudData: any = ref([]); // 创新词云
    const CompInfoData: any = ref({}); // 总体信息
    const BusinessInfoData: any = ref([]); // 工商信息
    const TechLayoutData: any = ref([]); // 技术布局
    const TechAnalysisData: any = ref([]); // 技术构成分析

    onMounted(async () => {
      //  获取url 传参的 公司id
      const route = useRoute();
      const companyId = route.params.company_id;
      let companyRes; // 用于承接公司信息数据，包含： 总体信息、工商信息

      //   获取数据
      [InnoStrategyData.value, WordCloudData.value, companyRes, TechLayoutData.value, TechAnalysisData.value] =
        await Promise.all([
          InnoStrategyAPI(companyId),
          WordCloudAPI(companyId),
          CompInfoAPI(companyId),
          TechLayoutAPI(companyId),
          TechAnalysisAPI(companyId),
        ]);

      //   分类处理总体信息、工商信息
      CompInfoData.value = companyRes;
      BusinessInfoData.value = BusinessInfoMAP.map((b: any) => {
        b.value = companyRes?.[b.key] ?? '-';
        return b;
      });
    });

    return { InnoStrategyData, WordCloudData, CompInfoData, BusinessInfoData, TechLayoutData, TechAnalysisData };
  },
  render() {
    return (
      <div id="CompanyDetail">
        <main>
          <aside>
            {/* 创新战略 */}
            <InnoStrategy data={this.InnoStrategyData}></InnoStrategy>
            {/* 创新词云 */}
            <InnoWordCloud data={this.WordCloudData}></InnoWordCloud>
          </aside>

          <main>
            <CompInfo data={this.CompInfoData}></CompInfo>

            {/* 工商信息 */}
            <BusinessInfo data={this.BusinessInfoData}></BusinessInfo>
          </main>

          <aside>
            {/* 技术布局 */}
            <TechLayout data={this.TechLayoutData}></TechLayout>

            {/* 技术构成分析 */}
            <TechAnalysis data={this.TechAnalysisData}></TechAnalysis>
          </aside>
        </main>

        <footer></footer>
      </div>
    );
  },
});
